<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>config</title>
    <style>
        span {
            display: inline-block;
            width: 105px;
            text-align: right;
        }

        h4 {
            display: inline;
        }

        .default {
            display: inline;
        }
    </style>
</head>

<body>
    <h4>sta_wifi静态IP配置</h4><br />
    <span style=>WIFI名：</span><input type="text" name="config" id="ssid" /><button id="scan">扫描</button><br />
    <span>WIFI密码：</span><input type="text" name="config" /><br />
    <span>IP地址：</span><input type="text" name="config" /><br />
    <span>网关地址：</span><input type="text" name="config" /><br />
    <span>子网掩码：</span><input type="text" name="config" /><br />
    <span>DNS：</span><input type="text" name="config" /><br />
    <br />
    <h4>IO配置</h4><br />
    <span>开关IO：</span><input name="config" type="text" /><br />
    <span>LED_IO：</span><input name="config" type="text" /><br />
    <span>电脑状态IO：</span><input name="config" type="text" /><br />
    <span>电脑重启IO：</span><input name="config" type="text" /><br /><br />
    <h4>控制模式</h4><br />
    <input name="control_mode" type="radio" value="0" /><label>继电器模式</label>
    <input name="control_mode" type="radio" value="1"/><label>电脑模式</label>
    <input id="control_mode_value" style="display: none;" name="config" type="text" value="" /><br />
    <br />
    <h4>ntp及物联网平台配置</h4><br />
    <span>ntp地址：</span><input type="text" name="config" /><br />

    <span>BlinkerAuth：</span><input name="config" type="text" /><span class="default">启用</span><input name="config"
        id="blinker_enable" type="checkbox" value="" /><br />
    <span>巴法云Auth：</span><input name="config" type="text" /><span class="default">启用</span><input name="config"
        id="bemfa_enable" type="checkbox" value="" /><br /><br />

    <input type="button" value="保存" id="save" />&nbsp;&nbsp;<input type="button" value="esp重启" id="reboot" /><br /><br />
    <span class="default">send: </span><label id="xhr_result"></label><br />

    <dialog id="favDialog">
        <form method="dialog">
            <p>
                <label>wifi列表:
                    <select id="dialog_list">
                        <option value="default">Choose…</option>
                        <option>Brine shrimp</option>
                        <option>Red panda</option>
                        <option>Spider monkey</option>
                    </select>
                </label>
            </p>
            <div>
                <button value="cancel">取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <button id="confirmBtn" value="default">确定</button>
            </div>
        </form>
    </dialog>
</body>
<script>
    function xhr_send(path) {
        document.getElementById("xhr_result").innerHTML = path
        let xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                document.getElementById("xhr_result").innerHTML += " ok";
                if (path == '/scan') {
                    let list = JSON.parse(xhr.response)['wifi_arr']
                    let dialog_list = document.getElementById('dialog_list')
                    dialog_list.innerHTML = `<option value="default">选择</option>`;
                    for (let i = 0; i < list.length; i++) {
                        dialog_list.innerHTML += (`<option value='${list[i].ssid}'>${list[i].ssid}  ${list[i].rssi}</option>`)
                    }
                    favDialog.showModal();
                }
                if (path == 'config_data_get') {
                    let json = JSON.parse(xhr.response)
                    let tmp = document.getElementsByName("config")
                    for (let i = 0; i < tmp.length; i++) {
                        if (i == (tmp.length - 6)) {
                            //control_mode
                            let v=parseInt(json['arg' + i]);
                            let radios = document.getElementsByName("control_mode");
                            radios[0].checked = false;
                            radios[1].checked = false;
                            radios[v].checked = true;
                            document.getElementById("control_mode_value").value=v;
                        }
                        else if (i == (tmp.length - 3)) {
                            //blinker_enable
                            document.getElementById("blinker_enable").checked = (json['arg' + i] == "open" ? true : false)
                        }
                        else if (i == (tmp.length - 1)) {
                            //bemfa_enable
                            document.getElementById("bemfa_enable").checked = (json['arg' + i] == "open" ? true : false)
                        } else {
                            tmp[i].value = json['arg' + i]
                        }
                    }
                }
            } else if (xhr.readyState == 4 && xhr.status != 200) {
                document.getElementById("xhr_result").innerHTML += " err";
            }
        }
        xhr.open('GET', path)
        xhr.send()
    }
    //选择对话框
    if (typeof favDialog.showModal !== "function") {
        favDialog.hidden = true;
    }
    document.getElementById("scan").addEventListener("click", async () => {
        if (typeof favDialog.showModal === "function") {
            xhr_send('/scan')
        } else {
            outputBox.value =
                "Sorry, the <dialog> API is not supported by this browser.";
        }
    });
    document.getElementById("confirmBtn").addEventListener("click", async () => {
        document.getElementById("ssid").value = document.getElementById('dialog_list').value
    });
    //save wifi
    document.getElementById("save").addEventListener("click", () => {
        let path = '/save_wifi?'
        let tmp = document.getElementsByName("config")
        for (let i = 0; i < tmp.length; i++) {
            if (tmp[i].type == 'text') {
                path += `&arg${i}=${encodeURIComponent(tmp[i].value)}`;
            } else if (tmp[i].type == 'checkbox') {
                let enable = tmp[i].checked == true ? 'open' : 'close';
                path += `&arg${i}=${enable}`
            }
        }
        xhr_send(path)
    })
    //reboot
    document.getElementById("reboot").addEventListener("click", () => {
        xhr_send('/reboot')
    })
    //control_mode
    let radios = document.getElementsByName("control_mode")
    for (let i = 0; i < radios.length; i++) {
        radios[i].addEventListener("click", () => {
            document.getElementById("control_mode_value").value=radios[i].value;
        })
    }
    xhr_send('config_data_get')
</script>

</html>